<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>保存注册信息</title>
</head>

<body>
    <!-- 存值 -->
    <h2>用户注册</h2>
    用户名：<input type="text" id="txt_name">
    密码：<input type="password" id="txt_pwd">
    电话：<input type="text" id="txt_tel">
    <input type="button" value="注册" id="btnReg"><br><br><br>
    <!-- 取值 -->
    <button id="btnGet">取值</button>
    <textarea id="txt" cols="30" rows="10"></textarea>
    <script>
        var phone = document.querySelector('#txt_tel');
        var _name = document.querySelector('#txt_name');
        var pwd = document.querySelector('#txt_pwd');
        var btnReg = document.querySelector('#btnReg');
        //1、  存值
        var arr = [];//保存多个人
        btnReg.onclick = function () {
            //  把姓名 密码  电话保存起来 存在一个人对象
            var person = {};//人对象
            person.name = _name.value;
            person.pwd = pwd.value;
            person.tel = phone.value;
            // console.log(person);
            arr.push(person);
            //    console.log(arr);
            var arr1 = JSON.stringify(arr);
            localStorage.setItem('arr', arr1)
        }
        //2、取值
        var btnGet = document.querySelector('#btnGet');
        var txt = document.querySelector('#txt');
        var str = '';
        btnGet.onclick = function () {
            var psarr = localStorage.getItem('arr');
            console.log(psarr);
            psarr = JSON.parse(psarr);
            console.log(psarr);
            for (var i in psarr) {
                var _name = "姓名：" + psarr[i]["name"];
                var _pwd = "密码：" + psarr[i]["pwd"];
                var _tel = "电话：" + psarr[i]["tel"];
                str += (_name + _pwd + _tel + '\n')
            }
            txt.value = str
        }
    </script>
</body>

</html>